<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <style>
 *{
     margin:0;
	 padding:0;
  }
  *::selection{
    background:none;
  }
  #box{
    width:200px;
	height:100px;
	position:relative;
	margin:100px auto;
  }
   #box ul li{
	 font-size:30px;
	 text-align:center;
	 line-height:100px;
	 width:200px;
	 height:100px;
	 border:solid 1px black;
	 list-style-type:none;
	 position:absolute;
	 opacity:0;
   }
   #box ul li:first-child{
     opacity:1;
   }
   .btn{
      width:35px;
	  height:20px;
	  background-color:black;
	  color:red;
	  position:absolute;
	  top:40px;
	  text-align:center;
	  line-height:20px;
   }
   #next{
     right:0;
   }
   .btn:hover{
      background-color:yellow;
	  cursor:pointer;
   }
   .btn:active{
      background-color:blue;
   }
 </style>
 <body>
    <div id="box">
	   <ul>
	      <li>1</li>
		  <li>2</li>
		  <li>3</li>
		  <li>4</li>
		  <li>5</li>
	   </ul>
	   <div class="btn" id="prev">prev</div>
	   <div class="btn" id="next">next</div>
	</div>
 </body>
  <script>
      var li = document.getElementsByTagName("li");
	  var prev = document.getElementById("prev");
	  var next = document.getElementById("next");
	  var index = 0;
	  next.onclick = function(){
	   index++;
	   if(index == li.length){
	     index = 0;
	   }
	   for(var i=0;i<li.length;i++){
	     li[i].style.opacity = 0;
	   }
	   li[index].style.opacity = 1;
	   li[index].style.transition = "all 0.5s linear";
	  }
	  prev.onclick = function(){
	     index--;
	   if(index == -1){
	     index = li.length - 1;
	   }
	   for(var i=0;i<li.length;i++){
	     li[i].style.opacity = 0;
	   }
	   li[index].style.opacity = 1;
	   li[index].style.transition = "all 0.5s linear";
	 }
	   
  </script>
</html>
